<template>
	<view class="container" :style="{backgroundColor:bgcolor,backgroundImage:'url(' + bgimg + ')', 'background-size': '100%' + bgheight + '%'}">
		<!-- 头部 -->
	<!-- 	<uni-nav-bar backgroundColor="" :fixed="true" :statusBar="true" :border="false">
			<block v-slot:left>
				<uni-icons @click="back" class="back" color="#FFF" type="back" size="25"></uni-icons>
			</block>
			<block v-slot:right style="width: 40px;">
			</block>
		</uni-nav-bar> -->
		<view v-if="explain[0]&&explain[0].type == 'info'">
			<uni-nav-bar v-if="explain[0]&&explain[0].title" :title="explain[0].title" statusBar :backgroundColor="explain[0].navBackgroundColor||'rgba(0,0,0,0)'"
				:border="false" :color="explain[0].titleColor" :fixed="true">
					<block v-slot:left>
						<uni-icons @click="back" class="back" color="#000" type="back" size="25"></uni-icons>
					</block>
				</uni-nav-bar>
					<view v-else style="height: 20px; padding: 10px;">
						<uni-icons @click="back" class="back" color="#FFF" type="back" size="25"></uni-icons>
					</view>
		</view>
		<!-- </scroll-view> -->
		<view v-if="explain.length>0">
			<view v-for="(item,index) in explain" :key="index">
				<view>
					<!-- 导航栏组件 -->
<!-- 					<view v-if="item.type == 'info'">
						<uni-nav-bar :title="item.title" statusBar :backgroundColor="item.navBackgroundColor||'rgba(0,0,0,0)'"
							:border="false" :color="item.titleColor" :fixed="true"></uni-nav-bar>

					</view> -->
					<!-- 商家信息 -->
					<view v-if="item.type == 'head'">
						<view class="headerbox">
							<view class="header">
								<view class="leftbox">
									<view class="img">
										<image :src="data.info.shop_head" mode=""></image>
									</view>
									<view class="right">
										<view class="name textsl1">
											{{data.info.name}}
										</view>
										<view class="box">
											<uni-rate :disabled="true" disabledColor="#FFC41F" :value="data.info.star" />
											<view class="rightbox" @click="follow(data.info.ID)">
												{{data.info.follow==0?"关注":"取消关注"}}
											</view>
										</view>
										<view class="introduce textsl5">
											商家介绍:{{data.info.introduce}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 轮播图 -->
					<view v-if="item.type == 'banner'">
						<carousel :data="item"></carousel>
					</view>
					<!-- 通告 -->
					<view v-if="item.type == 'notice'">
						<notice :list="item.data" :Dataobj="item"></notice>
					</view>
					<!-- 功能区 -->
					<view v-if="item.type == 'navigation'">
						<navigation :list="item.data" :type="item.tabType"></navigation>
					</view>
					<!-- 广告 图片 -->
					<view v-if="item.type == 'images'" style="padding: 20upx;">
						<posterbox :type="item.tabType" :list="item.data"></posterbox>
					</view>
					<!-- 普通商品列表 -->
					<view v-if="item.type == 'product'">
						<view class="listbox">
							<scroll-view class="left" :scroll-x="true" show-scrollbar="false" style="white-space: nowrap">
								<view class="lists">
									<view class="item" :class="{'active':data.active==index}"
										v-for="(item,index) in data.businessClassList" :key="item.ID" @click="setActive(index)">
										{{item.name}}
									</view>
								</view>
							</scroll-view>

							<view class="right" @click="data.type=!data.type">
								|
								<image v-if="data.type" src="https://pubuimg.cqguanjie.cn/chat/16945952331758"></image>
								<image v-else src="https://pubuimg.cqguanjie.cn/chat/16945960727876"></image>
							</view>
						</view>

					<!-- <scroll-view scroll-y="true" > -->
					<view class="content">
						<view :class="{'lists':data.type,'list':!data.type}">
							<view class="item" v-for="(item,index) in data.list"
								@click="$goURl('/pages/commodity/details?id='+item.ID)">
								<view class="image">
									<image :src="item.img" mode="aspectFill"></image>
								</view>
								<view class="box">
									<view class="name textsl2">
										{{item.name}}
									</view>
									<view class="price">
										<view class="price1">
											￥<text>{{$toFiexd(item.price,2)}}</text>
										</view>
										<view class="price2">
											{{item.sales}}人付款
										</view>
									</view>
								</view>
							</view>
						</view>
						<empty v-if="data.list.length==0"></empty>
						</view>
					</view>
				</view>
				<!-- 砍价 -->
				<view v-if="item.type == 'kanjia'">
					<bargain></bargain>
				</view>
				<!-- 秒杀商品列表 -->
				<view v-if="item.type == 'miaosha'">
					<KillGoodsList :list="data.list"></KillGoodsList>
				</view>
				<!-- 拼团 -->
				<view v-if="item.type == 'pintuan'">
					<pintuan></pintuan>
				</view>
				<!-- 辅助分割 -->
				<view v-if="item.type == 'division'">
					<division :type="item.tabType" :obj="item"></division>
				</view>
				<!-- 宣传标题 -->
				<view v-if="item.type == 'propagate'">
					<propagate :type="item.tabType" :obj="item"></propagate>
				</view>
				<!-- 视频 -->
				<view v-if="item.type == 'videoDemo' ">
					<videoDemo :type="item.tabType" :obj="item"></videoDemo>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

	// 秒杀
	import KillGoodsList from "@/components/home/goods/killGoodsList.vue"
	//商品列表
	import carousel from "@/components/home/carousel/carousel.vue"
	//轮播图
	import GoodsList from "@/components/home/goods/goodsList.vue"
	// 砍价
	import bargain from "@/components/home/bargain/bargain.vue"
	//图片
	import posterbox from "@/components/home/image/poster.vue"
	//导航
	import navigation from "@/components/home/navigation/navigation.vue"
	// 公告
	import notice from "@/components/home/notice/notice.vue"
	// 公告
	import pintuan from "@/components/home/pintuan/pintuan.vue"
	//辅助分割
	import division from "@/components/home/division/division.vue"
	//宣传标题
	import propagate from "@/components/home/propagate/propagate.vue"
	//视频
	import videoDemo from "@/components/home/videoDemo/videoDemo.vue"

	const {
		proxy
	} = getCurrentInstance();
	const data = reactive({
		id: 0,
		info: {},
		businessClassList: [],
		active: 0,
		page: 0,
		pages: 1,
		list: [],
		size: 10,
		type: true
	})
	const explain = ref([]) //页面所有数据
	const bgcolor = ref() //页面背景颜色
	const bgheight = ref() //页面背景颜色
	const bgimg = ref() //页面背景
	onLoad((option) => {
		data.id = option.id
	})
	onShow(() => {
		shopInfo() //店铺信息
		getbusinessClassList() //店铺分类

	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		getgoods()
		console.log('onReachBottom')
	})
	//获取首页格式
	function getIndex() {
		proxy.$request({
			url: `api/decoration/?business_id=${data.id}`,
			method: 'get',
			success(res) {
					console.log(res,"Rrr")
				if (res.errno == 0 && res.data.explain != '') {
					explain.value = JSON.parse(res.data.explain)
					explain.value.forEach((it) => {
						if (it.type == 'info') {
							bgcolor.value = it.backgroundColor
							bgimg.value = it.backgroundImage
							bgheight.value = it.height
						}
						if (typeof it.tabType == 'string') {
							it.tabType = parseInt(it.tabType);
						}
					})

				} else {

				}


			}
		})
	}

	function shopInfo() {
		proxy.$request({
			url: `api/shopInfo/?id=${data.id}`,
			method: 'get',
			success(res) {
				console.log(res, "res")
				data.info = res.data
				getIndex() // 装修数据
			}
		})
	}
	// 点击关注/取消关注
	function follow(id) {
		proxy.$request({
			url: `api/follow/`,
			method: 'POST',
			data: {
				id: id
			},
			success: (res) => {
				if (res.errno == 0) {
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
					data.info.follow = data.info.follow == 0 ? 1 : 0
				}
			}
		})
	}

	function getbusinessClassList() {
		proxy.$request({
			url: `api/businessClassList/?business_id=${data.id}&page=1&size=999`,
			method: 'get',
			success(res) {
				data.businessClassList = [{
					name: '全部',
					ID: -1
				}, ...res.data.data]
				getgoods() //获取商品
			}
		})
	}

	function setActive(index) { //分类切换
		data.active = index
		data.page = 0
		data.pages = 1
		data.list = []
		getgoods()

	}

	function back(index) { //返回
		uni.navigateBack()

	}
	// 获取商品
	function getgoods() {
		// let id=JSON.parse(JSON.stringify())
		console.log()
		if (data.page < data.pages) {
			data.page++
			proxy.$request({
				url: `api/goods_list_all/0/?page=${data.page}&business_id=${data.id}&size=${data.size}&business_class_id=${data.businessClassList[data.active].ID}`,
				method: 'get',
				data: {
					page: data.page,
					size: data.size
				},
				success: (res) => {
					res.data.data.forEach(item => {
						data.list.push(item)
					})
					data.pages = Math.ceil(res.data.total / data.size)
				}
			})

		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.container {
		// background-image: url('https://img.fubaozx.cn/static/oldImg/16995005892876.png');
		background-repeat: no-repeat;
		// background-size: 100% 40vh;
		background-position: top;
		height: 100vh;

		.headerbox {
			//height: calc(30vh - 140px);
      margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.header {
			padding: 0 30upx;

			.leftbox {
				display: flex;
			}

			.rightbox {
				min-width: 120upx;
				text-align: center;
				padding: 5upx 10upx;
				background-color: #fff;
				color:  $color4;
				border-radius: 30upx;
				font-size: 28upx;
			}

			image {
				width: 160upx;
				height: 160upx;
				border-radius: 50%;
			}

			.right {
				width: calc(100% - 180upx);
				height: 160upx;

				margin-left: 20upx;

				.name {
					font-size: 32upx;
					font-weight: 600;
					//color: #fff;
				}

				.box {
					margin: 5upx 0;
					display: flex;
					justify-content: space-between;

					.gz {
						font-size: 24upx;
						color: #fff;
						border-radius: 10upx;
					}
				}

				.introduce {
					font-size: 24upx;
					//color: #fff;
				}
			}
		}

		.listbox {
			display: flex;
			width: calc(100% - 40upx);
			align-items: center;
			padding: 0 20upx;
			overflow: hidden;
			margin-top: 10upx;

			.left {

				width: calc(100% - 60upx);

				.lists {
					display: flex;
				}

				.item {
					// width: 25%;
					color: #999;
					padding: 0 15upx;
					margin-right: 20upx;
					text-align: center;
				}

				.active {
					color: $color4;
					background-color: #fff;
					border-radius: 30upx;
				}


			}

			.right {
				width: 60upx;
				display: flex;
				margin-left: 10upx;
				color: #ccc;
				align-items: center;

				image {
					width: 50upx;
					height: 45upx;
					margin-left: 10upx;
				}
			}
		}

		.content {
			padding: 20upx;

			// height: calc(70vh - 30upx);
			.list {
				// column-count:2;
				// column-gap:10px;
				display: flex;
				flex-wrap: wrap;

				// padding-bottom: 10upx;
				.item {
					width: 48%;
					margin: 0 1%;
					background-color:$color4;
					margin-bottom: 20upx;
					background-color: #fff;
					box-shadow: 0 0 10upx #eee;
					border-radius: 20upx;

					.image {
						width: 100%;

						image {
							width: 100%;
							border-radius: 20upx 20upx 0 0;
						}
					}

					.box {
						padding: 10upx;

						.name {
							font-size: 28upx;
							font-weight: bold;
							margin-bottom: 10upx;
						}

						.price {
							color: #FF4E00;
							font-size: 32upx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price2 {
								color: #999;
								font-size: 20upx;
							}
						}
					}
				}
			}

			.lists {
				.item {
					background-color: $color4;
					margin-bottom: 20upx;
					background-color: #fff;
					box-shadow: 0 0 10upx #eee;
					border-radius: 20upx;
					overflow: hidden;
					display: flex;
					padding: 20upx;

					.image {
						width: 200upx;
						height: 200upx;

						image {
							width: 200upx;
							height: 200upx;
							border-radius: 20upx;
						}
					}

					.box {
						width: calc(100% - 220upx);
						padding: 10upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 28upx;
							font-weight: bold;
							margin-bottom: 10upx;
						}

						.price {
							color: #FF4E00;
							font-size: 32upx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price2 {
								color: #999;
								font-size: 20upx;
							}
						}
					}
				}
			}
		}
	}
</style>
